<template>
	<!-- <view class="container" :style="{paddingTop:tH}">
		<view class="headerTit" :style="{height:tH,paddingTop:pT}">
			泗河基地
		</view> -->
	<sys-container :label="'考试结果'" showBack withoutTop="true">
		<template v-slot:content>
			<view class="warp">
				<view class="staticForTest">
					<view class="singleSta">
						<view class="staVal">
							{{dataInfo.test_paper_question.length}}
						</view>
						<view class="staTit">
							题目数量
						</view>
					</view>
					<view class="singleSta">
						<view class="staVal">
							{{dataInfo.wrong_question}}
						</view>
						<view class="staTit">
							错题数量
						</view>
					</view>
					<view class="singleSta">
						<view class="staVal">
						{{dataInfo.not_questions}}
						</view>
						<view class="staTit">
							未作答数
						</view>
					</view>
					<view class="singleSta">
						<view class="staVal">
							<!-- 01:00:00 -->
							{{duringTime((dataInfo.end_time-dataInfo.start_time),'HH:mm:ss')}}
						</view>
						<view class="staTit">
							本次用时
						</view>
					</view>
				</view>
				<view class="answerRes">
					<view class="answerTit">
						<text>答题情况</text>
						<view class="legend">
							<view class="singleLeg">
								<view class="cir gre"></view>
								<text>正确</text>
							</view>
							<view class="singleLeg">
								<view class="cir red"></view>
								<text>错误</text>
							</view>
							<view class="singleLeg">
								<view class="cir"></view>
								<text>未答</text>
							</view>
						</view>
					</view>
				
					<view class="answerMain">
						<view class="singleTask" v-for="(item,index) in dataInfo.test_paper_question" :class="item.userAnswer&&item.userAnswer.is_correct?item.userAnswer.is_correct==2?'beDo':'errorDo':''" :key="index">
							{{index+1}}
						</view>
					</view>
					<view class="btnArea" style="text-align: center;line-height: 80rpx;color:#fff" @tap="handleBack">
						返回
					</view>
				</view>
			</view>
		</template>

	</sys-container>

	<!-- </view> -->
</template>

<script>
	import {examinationResults} from '@/globalApi/requestApi.js'
	import {duringTime} from '@/util/index.js'
	export default {
		components: {

			// sysContainer
		},
		data() {
			return {
			dataInfo:{
				test_paper_question:[]
			},
			recordId:'',
			duringTime
			}
		},
		onLoad(options) {
			this.recordId = options.recordId
			this.type = options.type
			this.getData()
		},
		methods: {
			getData(){
				examinationResults({examination_record_id:this.recordId,type:this.type}).then(res=>{
					this.dataInfo = res.data
					if(res.data.type!=1){
						this.$showModal2({
							title: '考试结果' ,
							showCancel:false,
							content: '您本次模拟考试完成，考试分数为'+res.data.score+'分'
							// content: '这是一个模态弹窗',
						
						})
						// uni.showModal({
						// 	title: '考试结果',
						// 		content: '您本次模拟考试完成，考试分数为'+res.data.score+'分',
						// 		cancelText: "取消", // 取消按钮的文字  
						// 		confirmText: "确认", // 确认按钮的文字  
						// 		showCancel: false, // 是否显示取消按钮，默认为 true
						// 		confirmColor: '#f55850',
						// 		success: (res) => {
						// 			if(res.confirm) {  
						// 				console.log('comfirm') //点击确定之后执行的代码
						// 			} else {  
						// 				console.log('cancel') //点击取消之后执行的代码
						// 			}  
						// 		} 
							
						// })
					}
				})
			},
			takeTask(){
				uni.navigateTo({
					url: '../takeTest/takeTest'
				})
			},
			handleBack(){
				uni.switchTab({
					url:'../../tabbar/testAndPro'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {}

	.warp {
		height: 100%;
		width: 100%;
		background: #f8f8f8;
		overflow: auto;
		padding:35rpx 30rpx;
		box-sizing: border-box;
		.staticForTest{
			padding:70rpx 50rpx;
			box-sizing: border-box;
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			border-radius: 8rpx;
			.singleSta{
				color: #222222;
				.staTit{
					margin-top:40rpx;
					text-align: center;
					font-size: 24rpx;
				}
				.staVal{
					text-align: center;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			
		}
		.answerRes{
			padding:70rpx 50rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 8rpx;
			.answerTit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 22rpx;
				font-weight: bold;
				color: #222222;
				.legend{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.singleLeg{
						display: flex;
						align-items: center;
						margin-left:20rpx;
						.cir{
							width:22rpx;
							height:22rpx;
							border:1rpx solid #969696;
							border-radius: 50%;
							margin-right:10rpx;
						}
						.gre{
							background:#1EB93B
						}
						.red{
							background:#D7201D
						}
					}
				}
			}
		
			.answerMain{
				padding:45rpx 35rpx;
				box-sizing: border-box;
				display:grid;
				grid-template-columns: repeat(5,auto);
				.singleTask{
					width:80rpx;
					height:80rpx;
					text-align: center;
					line-height: 80rpx;
					border:1rpx solid #888888;
					border-radius: 50%;
					margin-bottom: 25rpx;
				}
				.success{
					background:#1EB93B;
					color:#fff;
				}
				.mistake{
					background:#D7201D  ;
					color:#fff;
				}
			}
		}
		.beDo{
			background: #1EB93B;
			color:#fff;
		}
		.errorDo{
			background: #D7201D;
			color:#fff;
		}
		.btnArea{
			width:100%;
			height:80rpx;
			background: #D7201D;
			position: fixed;
			bottom:0;
			left: 0;
		}
	}
</style>